<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram - Cylinder on Inclined Plane</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="550"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw an arrow
        function drawArrow(fromX, fromY, toX, toY, headLength = 10) {
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // General settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = 'italic 18px Times New Roman';

        // --- Draw Inclined Plane (Hill H) ---
        const angle_deg = 30;
        const angle_rad = angle_deg * Math.PI / 180;
        const incline_start = { x: 80, y: 450 };
        const incline_len = 350;
        const incline_top = {
            x: incline_start.x + incline_len * Math.cos(angle_rad),
            y: incline_start.y - incline_len * Math.sin(angle_rad)
        };
        const incline_corner = { x: incline_top.x, y: incline_start.y };

        // Draw the triangle shape
        ctx.beginPath();
        ctx.moveTo(incline_start.x, incline_start.y);
        ctx.lineTo(incline_top.x, incline_top.y);
        ctx.lineTo(incline_corner.x, incline_corner.y);
        ctx.closePath();
        ctx.stroke();
        
        // Add label H
        ctx.fillText('H', incline_top.x - 100, incline_top.y + 100);

        // Add hatching
        ctx.lineWidth = 1;
        const num_hatch = 15;
        for (let i = 1; i <= num_hatch; i++) {
            const pos_on_hyp = i / (num_hatch + 1);
            const p1 = {
                x: incline_start.x + pos_on_hyp * incline_len * Math.cos(angle_rad),
                y: incline_start.y - pos_on_hyp * incline_len * Math.sin(angle_rad)
            };
            const p2 = {
                x: p1.x + 20 * Math.sin(angle_rad),
                y: p1.y + 20 * Math.cos(angle_rad)
            };
            ctx.beginPath();
            ctx.moveTo(p1.x, p1.y);
            ctx.lineTo(p2.x, p2.y);
            ctx.stroke();
        }
        ctx.lineWidth = 2;

        // Draw angle indicator
        ctx.beginPath();
        ctx.moveTo(incline_start.x, incline_start.y);
        ctx.lineTo(incline_start.x + 60, incline_start.y);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(incline_start.x, incline_start.y, 50, 0, -angle_rad, true);
        ctx.stroke();
        ctx.fillText('30°', incline_start.x + 55, incline_start.y - 15);


        // --- Draw Cylinder C ---
        const cyl_radius = 40;
        const dist_from_bottom = 120;
        const contact_point_P = {
            x: incline_start.x + dist_from_bottom * Math.cos(angle_rad),
            y: incline_start.y - dist_from_bottom * Math.sin(angle_rad)
        };
        const center_C = {
            x: contact_point_P.x - cyl_radius * Math.sin(angle_rad),
            y: contact_point_P.y - cyl_radius * Math.cos(angle_rad)
        };

        // Draw cylinder
        ctx.beginPath();
        ctx.arc(center_C.x, center_C.y, cyl_radius, 0, 2 * Math.PI);
        ctx.stroke();
        
        // Mark center C
        ctx.beginPath();
        ctx.arc(center_C.x, center_C.y, 3, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText('C', center_C.x - 20, center_C.y - 5);

        // Mark contact point P
        ctx.fillText('P', contact_point_P.x + 5, contact_point_P.y + 20);

        // --- Draw Coordinate System ---
        const axis_origin = { x: 60, y: 350 };
        const axis_len = 60;
        drawArrow(axis_origin.x, axis_origin.y, axis_origin.x + axis_len * Math.cos(angle_rad), axis_origin.y - axis_len * Math.sin(angle_rad));
        ctx.fillText('x', axis_origin.x + (axis_len+10) * Math.cos(angle_rad), axis_origin.y - (axis_len+10) * Math.sin(angle_rad) + 8);
        drawArrow(axis_origin.x, axis_origin.y, axis_origin.x - axis_len * Math.sin(angle_rad), axis_origin.y - axis_len * Math.cos(angle_rad));
        ctx.fillText('y', axis_origin.x - (axis_len+10) * Math.sin(angle_rad) - 8, axis_origin.y - (axis_len+10) * Math.cos(angle_rad));

        // --- Forces and Motion on Cylinder ---
        // Weight mg
        drawArrow(center_C.x, center_C.y, center_C.x, center_C.y + 80);
        ctx.fillText('mg', center_C.x + 5, center_C.y + 95);

        // Friction f
        const f_start = { x: contact_point_P.x, y: contact_point_P.y };
        const f_len = 50;
        const f_end = {
            x: f_start.x - f_len * Math.cos(angle_rad),
            y: f_start.y + f_len * Math.sin(angle_rad)
        };
        drawArrow(f_start.x, f_start.y, f_end.x, f_end.y);
        ctx.fillText('f', f_end.x - 15, f_end.y + 15);

        // Tension F on cylinder
        const F_cyl_start = {
            x: center_C.x + cyl_radius * Math.sin(angle_rad),
            y: center_C.y - cyl_radius * Math.cos(angle_rad)
        };
        const F_len = 80;
        const F_cyl_end = {
            x: F_cyl_start.x - F_len * Math.cos(angle_rad),
            y: F_cyl_start.y + F_len * Math.sin(angle_rad)
        };
        drawArrow(F_cyl_start.x, F_cyl_start.y, F_cyl_end.x, F_cyl_end.y);
        ctx.fillText('F', F_cyl_end.x - 20, F_cyl_end.y);

        // Rotation indicator theta_dot
        ctx.beginPath();
        ctx.arc(center_C.x, center_C.y, cyl_radius * 0.5, -Math.PI/2, Math.PI/4);
        ctx.stroke();
        const arrow_tip_angle = Math.PI/4;
        const arrow_x = center_C.x + cyl_radius * 0.5 * Math.cos(arrow_tip_angle);
        const arrow_y = center_C.y + cyl_radius * 0.5 * Math.sin(arrow_tip_angle);
        const arrow_angle = arrow_tip_angle + Math.PI/2;
        ctx.beginPath();
        ctx.moveTo(arrow_x, arrow_y);
        ctx.lineTo(arrow_x - 8 * Math.cos(arrow_angle - Math.PI / 6), arrow_y - 8 * Math.sin(arrow_angle - Math.PI / 6));
        ctx.moveTo(arrow_x, arrow_y);
        ctx.lineTo(arrow_x - 8 * Math.cos(arrow_angle + Math.PI / 6), arrow_y - 8 * Math.sin(arrow_angle + Math.PI / 6));
        ctx.stroke();
        ctx.fillText('θ', center_C.x + cyl_radius * 0.6, center_C.y);
        // dot for theta_dot
        ctx.beginPath();
        ctx.arc(center_C.x + cyl_radius * 0.6 + 5, center_C.y - 18, 1.5, 0, 2*Math.PI);
        ctx.fill();


        // --- Pulley and Hanging Mass ---
        const pulley_radius = 28;
        const pulley_center = {
            x: incline_top.x + 15,
            y: incline_top.y - 15
        };

        // Pulley support arm
        const arm_start = { x: incline_top.x-10, y: incline_top.y + 25 };
        ctx.beginPath();
        ctx.moveTo(arm_start.x, arm_start.y);
        ctx.lineTo(pulley_center.x, pulley_center.y);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(arm_start.x, arm_start.y, 3, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(pulley_center.x, pulley_center.y, 3, 0, 2 * Math.PI);
        ctx.stroke();
        
        // Draw pulley
        ctx.beginPath();
        ctx.arc(pulley_center.x, pulley_center.y, pulley_radius, 0, 2 * Math.PI);
        ctx.stroke();

        // Draw string
        const string_pulley_tan = {
            x: pulley_center.x - pulley_radius * Math.cos(Math.PI/2 - angle_rad),
            y: pulley_center.y + pulley_radius * Math.sin(Math.PI/2 - angle_rad)
        };
        ctx.beginPath();
        ctx.moveTo(F_cyl_start.x, F_cyl_start.y);
        ctx.lineTo(string_pulley_tan.x, string_pulley_tan.y);
        ctx.arc(pulley_center.x, pulley_center.y, pulley_radius, Math.PI + angle_rad, 2*Math.PI, false);
        const string_vertical_start = { x: pulley_center.x + pulley_radius, y: pulley_center.y };
        ctx.lineTo(string_vertical_start.x, string_vertical_start.y + 110);
        ctx.stroke();

        // Draw hanging mass
        const mass_size = 40;
        const mass_center = { x: string_vertical_start.x, y: string_vertical_start.y + 110 + mass_size/2 };
        ctx.strokeRect(mass_center.x - mass_size / 2, mass_center.y - mass_size / 2, mass_size, mass_size);
        ctx.font = 'bold 16px Arial';
        ctx.fillText('2.0 kg', mass_center.x + mass_size / 2 + 5, mass_center.y + 5);
        ctx.font = 'italic 18px Times New Roman';
        
        // Mark center of mass
        ctx.beginPath();
        ctx.arc(mass_center.x, mass_center.y, 3, 0, 2 * Math.PI);
        ctx.fill();

        // Forces on hanging mass
        // Tension F
        drawArrow(mass_center.x, mass_center.y - mass_size / 2, mass_center.x, mass_center.y - mass_size / 2 - 60);
        ctx.fillText('F', mass_center.x + 8, mass_center.y - mass_size/2 - 65);
        // Weight mg
        drawArrow(mass_center.x, mass_center.y, mass_center.x, mass_center.y + 70);
        ctx.fillText('mg', mass_center.x + 8, mass_center.y + 85);

        // --- Figure Caption ---
        ctx.font = '16px Times New Roman';
        ctx.fillText('Fig. 1.121.', canvas.width / 2 - 40, canvas.height - 20);

    </script>
</body>
</html>